<template>
  <div id="index">
    <el-tabs v-model="activeName" tab-position="left" style="height: 200px;" @tab-click="handleClick">
      <el-tab-pane v-for="(type, index) in typeList" :key="index+activeName" :name="type.val" :label="type.name">
        <ul v-if="isShow">
          <li v-for="(note, noteIndex) in noteList[type.val]" :key="noteIndex" style="border-bottom: 1px #ddd solid;padding: 8px;" @click="$router.push('/theme1/noteView?id='+note.id)">
            <div style="float: right">{{ note.createTime }}</div>
            {{ note.title }}
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { noteTypeList } from '@/api/config/dict'
import api from '@/api/note/ApiNote'
export default {
  name: 'Index',
  data() {
    return {
      typeList: undefined,
      isShow: false,
      noteList: {},
      activeName: undefined
    }
  },
  mounted() {
    noteTypeList('GraphicType').then(res => {
      this.typeList = res.data.data
      if (this.typeList !== undefined && this.typeList.length > 0) {
        this.initList(this.typeList[0].val)
        this.activeName = this.typeList[0].val
      }
    })
  },
  methods: {
    initList(noteType) {
      this.isShow = false
      api.listByType(noteType).then(res => {
        this.noteList[noteType] = res.data.data.records
        this.isShow = true
      })
    },
    handleClick(tab, event) {
      if (this.noteList[tab.paneName] === undefined) {
        this.initList(tab.paneName)
      }
    }
  }
}
</script>

<style scoped>
#index {
  padding: 20px;
  padding-top: 30px;
}
ul li {
  list-style: none;
}
</style>
